<template>
  <div class="address" id="address">

    <div v-if="pcOnline">
      <group class="pc_country_select">
        <selector v-if='item.required' :placeholder=" $t('form.choonseaddress')" v-model="country[0]" title="居住国家和地区" :options="countryDataPC" @on-change="onChangePC">

        </selector>
        <span v-show="item.required" style="position: absolute;top: 20px;left: 140px;" class="required">*</span>
      </group>
      <group v-show="showAddress" class='choosecitys'>
        <cell title="居住城市">
          <el-cascader :placeholder="item.title" expand-trigger="hover" :options="cityData" v-model="myAddressData" @change="onShadowChange">
          </el-cascader>
        </cell>
      </group>
    </div>

    <div v-if="!pcOnline">
      <group>
        <popup-picker value-text-align=‘left’ title="居住国家和地区" :data="countryData" cancel-text="取消" confirm-text="完成" :show-name=true v-model="country" @on-change="changeCountry" :placeholder=" $t('form.choonseaddress')">
          <template slot="title" slot-scope="props">
            <!-- use scope="props" when vue < 2.5.0 -->
            <span style="height:24px;">
              <span>{{$t('form.address')}}</span>
              <span :class="isRequired(item.required)">*</span>
            </span>
          </template>
        </popup-picker>
      </group>

      <group v-show="showAddress">
        <x-address value-text-align=‘left’ :title="item.label" :list="addressData" :placeholder=" $t('form.choonsecity')" raw-value v-model='myAddressData' @on-hide="showaddress" @on-shadow-change="onShadowChange">
          <template slot="title" slot-scope="props">
            <!-- use scope="props" when vue < 2.5.0 -->
            <span style="height:24px;">
              <span>{{$t('form.city')}}</span>
              <span :class="isRequired(item.required)">*</span>
            </span>
          </template>
        </x-address>
      </group>
    </div>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/

/* eslint-disable*/
import Vue from "vue";
import Address from "@/common/components/address.vue";

import { indexedDB } from "@/api/indexedDB.js";

import { cityData } from "@/common/locales/cityData.js";
import { countryData } from "@/common/locales/countryData1.js";

import { enCountryData } from "@/common/locales/enCountryData1.js";
import { pcCountryData } from "@/common/locales/pcCountryData1.js";
import { pcenCountryData } from "@/common/locales/pcenCountryData1.js";

import { DatePicker, Cascader } from "element-ui";
Vue.use(DatePicker);
Vue.use(Cascader);

import {
  Selector,
  Group,
  Cell,
  XInput,
  GroupTitle,
  PopupPicker,
  XAddress
} from "vux";

export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    item1: {
      type: Object
    },
    index: {
      type: Number,
      required: true
    },
    pcOnline: {
      type: Boolean,
      required: true
    },
    cityData: {
      required: true
    }
  },
  data() {
    return {
      value: "",
      countryData: [],
      countryDataPC: [],
      showAddress: false,
      myAddressData: [],
      popsData: {},
      country: [],
      addressData: cityData,
      countryCode: ""
    };
  },
  created() {},

  mounted() {
    //console.warn(this.item.label)
    //console.log(this.item)
    //console.log(this.item1
    console.log(this.item);
    console.log(this.item1);

    if (!!this.item.country) {
      //alert(1)
      //console.log(this.item.country);
      this.country.push(this.item.country);
      if (this.item.country == "001") {
        this.showAddress = true;
      }
    }

    if (!!this.item1.city) {
      if (
        this.item1.city.province &&
        this.item1.city.city &&
        this.item1.city.area
      ) {
        //this.$set(this, "myAddressData", ['430000', '430400', '430407']);
        //this.$set('myAddressData',['430000', '430400', '430407'])
        //this.myAddressData = ['430000', '430400', '430407']
        // this.myAddressData = [
        //    this.item1.city.province,
        //    this.item1.city.city,
        //    this.item1.city.area
        //  ];

        this.myAddressData = [
          this.item1.city.province,
          this.item1.city.city,
          this.item1.city.area
        ];
        console.log(this.myAddressData);
        this.popsData.province = this.myAddressData[0];
        this.popsData.city = this.myAddressData[1];
        this.popsData.area = this.myAddressData[2];
      }
       else {
        this.myAddressData = [
          this.item1.province,
          this.item1.city,
          this.item1.area
        ];
        console.log(this.myAddressData);
        this.popsData.province =this.item1.province;
        this.popsData.city = this.item1.city;
        this.popsData.area =  this.item1.area;
      }
    }

    this.national = window.localStorage.getItem("national");
    //console.log('national'+this.national)

    if (!!this.pcOnline) {
      //console.log(this.national)
      if (
        this.national != "001" ||
        this.national != "001081" ||
        this.national != "001071" ||
        this.national != "001082"
      ) {
        //this.countryDataPC = pcenCountryData;
        this.countryDataPC = pcCountryData;
      } else {
        this.countryDataPC = pcCountryData;
      }
    } else {
      if (
        this.national != "001" ||
        this.national != "001081" ||
        this.national != "001071" ||
        this.national != "001082"
      ) {
        //this.countryData = enCountryData;
        this.countryData = countryData;
      } else {
        this.countryData = countryData;
      }
    }

    // indexedDB('national', 'get', this.RACEID, '', function (a) {
    //   this.national = a;
    //   if (this.pcOnline) {
    //     if (this.national == '001' || this.national == '001081' || this.national == '001071' || this.national == '001082') {
    //       this.countryDataPC = pcCountryData
    //     } else {
    //       this.countryDataPC = pcenCountryData
    //     }
    //   } else {
    //     if (this.national == '001' || this.national == '001081' || this.national == '001071' || this.national == '001082') {
    //       this.countryData = countryData
    //     } else {
    //       this.countryData = enCountryData
    //     }
    //   }
    // }.bind(this));

    //修改颜色
    // setTimeout(() => {
    //   var list = document.querySelectorAll(".weui-select");
    //   //console.log('222');
    //   //console.log(list);
    //   [].forEach.call(list, (item, index) => {
    //     item.style.color = "#ccc";
    //   });
    // }, 0);
  },
  methods: {
    showaddress(b) {
      if (b == true) {
        this.popsData.country = "001";
        this.popsData.province = this.myAddressData[0];
        this.popsData.city = this.myAddressData[1];
        this.popsData.area = this.myAddressData[2];

        this.$emit("address", {
          data: this.popsData,
          index: this.index
        });
      }
    },
    onShadowChange(ids, names) {
      console.log(ids)
      //console.log(names)
      // if (!!this.item1.city) {
      //   this.myAddressData[0] = this.item1.province;
      //   this.myAddressData[1] = this.item1.city;
      //   this.myAddressData[2] = this.item1.area;
      // }

      //console.log(this.countryCode)

      if (this.country[0] == "" || this.country[0] != "001") {
        this.popsData.province = "";
        this.popsData.city = "";
        this.popsData.area = "";
      } else {
        this.popsData.country = "001";
        this.popsData.province = ids[0];
        this.popsData.city = ids[1];
        this.popsData.area = ids[2];
      }

      this.$emit("address", {
        data: this.popsData,
        index: this.index
      });
    },
    popAddress() {
      this.$emit("address", {
        index: this.index
      });
    },
    isRequired: function(required) {
      if (required) {
        return "required";
      }
      return "norequired";
    },
    onChangePC(val) {
      if (!val) {
        val = "";
      }
      if (val == "001") {
        this.showAddress = true;
        this.countryCode = val;
        this.popsData.country = this.countryCode;
      } else {
        this.showAddress = false;
        this.countryCode = val;
        this.popsData.country = val;
        this.popsData.province = "";
        this.popsData.city = "";
        this.popsData.area = "";
      }

      this.$emit("address", {
        data: this.popsData,
        index: this.index
      });
    },
    changeCountry(val) {
      if (!val) {
        val = "";
      }

      if (val[0] == "001") {
        this.showAddress = true;
        this.countryCode = val[0];
        this.popsData.country = this.countryCode;
        this.$emit("address", {
          data: this.popsData,
          index: this.index
        });
      } else {
        this.showAddress = false;
        this.countryCode = val[0];
        this.popsData.country = val[0];
        this.popsData.province = "";
        this.popsData.city = "";
        this.popsData.area = "";
      }

      this.$emit("address", {
        data: this.popsData,
        index: this.index
      });
    }
  },
  components: {
    Selector,
    Cell,
    Group,
    XInput,
    GroupTitle,
    PopupPicker,
    XAddress
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#form .choosecitys .weui-cell .weui-cell__hd {
  width: 0;
}

#form .address .weui-cell__hd {
  width: 8em;
}

#form .choosecitys .weui-cell .weui-cell__ft {
  display: initial;
}

// #form .vux-cell-bd {
//   max-width: 6em;
// }

#form .el-cascader__label {
  font-size: 17px;
  color: black;
  padding: 0 15px 0 0px;
  right: 0px;
}

#form .el-input__inner {
  color: black;
}

#form .vux-popup-picker-select {
  text-align: right;
}
</style>

